<template>
  <view class="myLogin">

    <u-cell-group :border="false" :customStyle="{'margin-bottom':'20px'}">
      <u-cell title="账号登录" :border="false" :titleStyle="{'font-weight': 600,'font-size':'24px'}" :isLink="true">
        <text slot="value" class="u-slot-value">手机号登录</text>
        <u-icon slot="right-icon" name="play-right-fill" color="#EF4F3F" size="10"></u-icon>
      </u-cell>
    </u-cell-group>
    <u--form labelPosition="left" :model="form" ref="uForm" class="form">
      <u-form-item prop="form.account" borderBottom ref="item1">
        <u--input v-model="form.account" clearable border="none" placeholder="请输入账号"></u--input>
      </u-form-item>

      <u-form-item prop="form.password" borderBottom ref="item2">
        
        <u--input v-model="form.password" :type="passwordType ? 'password' : 'number'" placeholder="请输入密码" border="none" clearable>
            <u-icon slot="suffix"  :name="passwordType ? 'eye-off' : 'eye-fill'" @click="changeType"></u-icon>
        </u--input>
      </u-form-item>
    </u--form>

    <u-button type="error" shape="circle" text="登录" @click="onLogin"></u-button>

  </view>
</template>

<script>
  export default {
    name: '',
    components: {},
    data() {
      return {
        value: '',
        passwordType:true, //密码状态：隐藏
        form: {
          account: '', //账户
          password: '' //密码
        }
      };
    },
    created() {},
    mounted() {},
    onLoad() {},
    methods: {
    changeType(){
      // 切换密码显示和隐藏
      this.passwordType = !this.passwordType
    },
    onLogin(){
      // 调接口
      uni.request({
          url: 'http://god-express-gateway-t.itheima.net/driver/login/account', 
          method: "POST",
          data: this.form,
          success: (res) => {
            // 如果状态码为200，就跳转到首页
            if(res.data.code===200){
              uni.switchTab({
              	url: '/pages/my/my',
                complete:res => {
                  console.log(res)
                }
              })
              
            }else{
              // 否则就显示错误信息
              uni.showToast({
              	title: res.data.msg,
                icon:'error',
              	duration: 2000
              });
            }
             
          }
      });
    }
    }
  }
</script>

<style lang="scss">
  .u-slot-value {
    color: #EF4F3F;
    font-weight: 500;
    font-size: 16px;
  }

  ::v-deep .u-cell__body {
    padding: 20px 0 !important;
  }

  .myLogin {
    padding: 33px;
  }

  .form {
    margin-bottom: 50px;
  }

  .input-icon {
    width: 35px;
    display: flex;
    justify-content: space-between;
  }
</style>